<template>
  <div class="categories-container">
    <div class="app-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <el-button type="primary" @click="showAddCateDialog"
          >添加分类</el-button
        >
        <!-- 表格数据 -->
        <tree-table
          :data="catelist"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          show-index
          index-text="#"
          border
          :show-row-hover="false"
          class="tree_table"
        >
          <!-- 是否有效区域， 设置对应的模板列： slot="isok"(与columns中设置的template一致) -->
          <template slot="isok" slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
          <!-- 排序 -->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              size="mini"
              type="success"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>
          <!-- 操作 -->
          <template slot="opt" slot-scope="{ row }">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editCate(row.cat_id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteCate(row.cat_id)"
              >删除</el-button
            >
          </template>
        </tree-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
      <el-dialog
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        width="50%"
        @close="addCateDialogClosed"
      >
        <el-form
          :model="addCateForm"
          :rules="addCateFormRules"
          ref="addCateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <div class="block">
              <el-cascader
                expandTrigger="hover"
                v-model="selectedKeys"
                :options="praentCateList"
                :props="cascaderProps"
                @change="parentCateChange"
                clearable
                change-on-select
              ></el-cascader>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
    

<script>
import {
  getGoodsCateList,
  getParentCateList,
  addCate,
  deleteCate,
} from "@/api/goods_cate";
export default {
  name: "GoodsCate",
  data() {
    return {
      catelist: [], //商品列表
      total: 0, //列表总条数
      addCateDialogVisible: false, //添加分类的对话框
      selectedKeys: [], //绑定用户选择的分类值
      // 查询条件
      queryInfo: {
        type: 3,
        pagenum: 1, //当前页码值
        pagesize: 5, //	每页显示多少条数据
      },
      // 表格数据列表
      columns: [
        { label: "分类名称", prop: "cat_name" },
        //type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok)
        { label: "是否有效", prop: "", type: "template", template: "isok" },
        { label: "排序", prop: "", type: "template", template: "order" },
        { label: "操作", prop: "", type: "template", template: "opt" },
      ],
      //配置级联菜单中数据如何展示
      cascaderProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        expandTrigger: "hover",
      },
      praentCateList: [],
      // 添加分类表单
      addCateForm: {
        cat_name: "", //分类名称
        cat_pid: 0, //分类父 ID
        cat_level: 0, //分类层级
      },
      // 添加分类表单验证规则
      addCateFormRules: {
        cat_name: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getGoodsCateList();
  },
  methods: {
    async getGoodsCateList() {
      const { data } = await getGoodsCateList(this.queryInfo);
      if (data.meta.status !== 200) {
        return this.$message.error("获取数据失败！");
      }
      this.catelist = data.data.result;
      this.total = data.data.total;
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getGoodsCateList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getGoodsCateList();
    },
    // 打开弹窗
    showAddCateDialog() {
      // 获取父级数据
      this.getParentCateList();
      this.addCateDialogVisible = true;
    },
    // 获取二级选择器数据
    async getParentCateList() {
      const { data } = await getParentCateList({
        type: 2,
      });
      // console.log(data);
      if (data.meta.status !== 200) {
        return this.$message.error("获取数据失败!");
      } else {
        this.praentCateList = data.data;
      }
    },
    // 当选择器发生改变
    parentCateChange() {
      if (this.selectedKeys.length > 0) {
        // 父级分类的 id
        this.addCateForm.cat_pid =
          this.selectedKeys[this.selectedKeys.length - 1];
        this.addCateForm.cat_level = this.selectedKeys.length;
        return;
      } else {
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
    },
    async addCate() {
      this.$refs.addCateForm.validate(async (validate) => {
        if (!validate) {
          return;
        } else {
          await addCate(this.addCateForm);
          this.$message.success("添加成功！");
          this.getGoodsCateList();
          this.addCateDialogVisible = false;
        }
      });
      // console.log(this.addCateForm);
    },
    // 清除弹出框的数据
    addCateDialogClosed() {
      this.$refs.addCateForm.resetFields();
      this.selectedKeys = [];
      this.addCateForm.cat_pid = 0;
      this.addCateForm.cat_level = 0;
    },
    // 编辑
    editCate(id) {
      // console.log(id);
      this.$alert("暂不支持编辑", "正在开发中......", {
        confirmButtonText: "确定",
      });
    },
    // 删除
    async deleteCate(id) {
      // console.log(id);
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deleteCate(id);
          this.$message.success("删除成功");
          this.getGoodsCateList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="sass" scoped>
.box-card
  margin-top: 20px
.tree_table
  margin-top: 20px
  margin-bottom: 20px
.el-cascader
  width: 100%
</style>
